<template>
	<div ref='app' id="app" :style="{overflow: show_play_detail?'hidden':'auto'}" :class="$store.state.song_info.id? 'bot':'no_bot'">
		<router-view />

		<transition name="fadeUp">
			<playerBar_yu @prev='prev_song' @next='next_song' v-show="$store.state.song_info.id && !show_play_detail "></playerBar_yu>
		</transition>

		<transition name="play_detail_fadein">
			<Play_detail @close='show_play_detail = false' class="Play_detail" v-show="show_play_detail"></Play_detail>
		</transition>

	</div>
</template>

<script>
	// import axios from "./util/request.js";
	import playerBar_yu from './components/playerBar_yu.vue';
	import Play_detail from './views/Home/play_detail/play_detail.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show_play_detail: false,
			}
		},
		// created() {
		// 	let banner_data = await this.$axios("https://netease.bluej.cn/banner ");
		// 	console.log(banner_data)
		// }
		components: {
			playerBar_yu,
			Play_detail
		},
		computed: {
			...mapState(["song_info", "play_list", "song_idx"]),
		},
		methods: {
			prev_song() {
				let nowidx = this.song_idx - 1;
				if (nowidx == -1) {
					nowidx = 9;
				}
				let prev_id = this.play_list[nowidx];
				//将vuex 内的 下标更新为 最新的下标
				this.$store.commit('change_idx', nowidx);
				//拿到id 后进行歌曲播放, 并且更新歌曲详情
				this.audio.playSong(prev_id);
				//触发 action 更新 vuex 内的song_info
				this.$store.dispatch("get_song_detail", prev_id);
				// 用id 去请求 歌词
				this.$store.dispatch('get_lyric', prev_id);
			},
			next_song() {
				let nowidx = this.song_idx + 1;
				if (nowidx == 10) {
					nowidx = 0;
				}
				let next_id = this.play_list[nowidx];
				//将vuex 内的 下标更新为 最新的下标
				this.$store.commit('change_idx', nowidx);
				//拿到id 后进行歌曲播放, 并且更新歌曲详情
				this.audio.playSong(next_id);
				//触发 action 更新 vuex 内的song_info
				this.$store.dispatch("get_song_detail", next_id);
				// 用id 去请求 歌词 
				this.$store.dispatch('get_lyric', next_id);

			}
		},
		created() {
			this.$nextTick(() => {

				this.$refs.app.addEventListener("scroll", () => {
					// console.log(this.$refs.app.scrollTop,this.$refs.app.clientHeight,this.$refs.app.scrollHeight)
					this.$bus.$emit("loadMore", {
						appSTop: this.$refs.app.scrollTop,
						appCHeight: this.$refs.app.clientHeight,
						appSHeight: this.$refs.app.scrollHeight,
					});
				});

			})
		}
	}
</script>

<style lang="scss">
	#app {
		height: 100vh;
		// width: 100%;
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;

		.fadeUp-enter,
		.fadeUp-leave-to {
			transform: translateY(100%);
		}

		.fadeUp-enter-active,
		.fade-leave-active {
			transition: all 1s;
		}

		.play_detail_fadein-enter,
		.play_detail_fadein-leave-to {
			transform: translateY(100%);
		}

		.play_detail_fadein-enter-active,
		.play_detail_fadein-leave-active {
			transition: all 1s;
		}

	}

	#nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}

	.bot {
		padding-bottom: 50px;
	}

	.no_bot {
		padding-bottom: 0;
	}

	.Play_detail {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		width: 100vw;
		height: 100vh;

		// background-color: pink;
	}
</style>
